<template>
  <!-- 收款审核 -->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="128px">
          <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag
              v-model:value="queryParam.ddlxIds"
              mode="multiple"
              dictCode="ddlxType@ddlxUser"
              placeholder="全部"
              :maxTagCount="0"
              :getPopupContainer="(node) => node.parentNode"
              :dropdownStyle="{ width: '140px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
            />
          </a-form-item>
        </a-col>

        <a-col flex="320px">
          <a-form-item label="收款时间" :label-col="{ style: { width: '70px' } }" >
            <a-date-picker
              v-model:value="queryParam.beginDate"
              :disabled-date="disabledStartDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 108px; padding: 4px;"
            />
            ~
            <a-date-picker
              v-model:value="queryParam.endDate"
              :disabled-date="disabledEndDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 109px; padding: 4px;"
            />
          </a-form-item>
        </a-col>

        <a-col flex="110px">
          <a-form-item label="状态" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 17 }">
            <a-select name="stat" id="stat" v-model:value="queryParam.stat" class="w80" placeholder="全部" :showArrow="false" :allowClear="false" >
              <a-select-option value="1">未审</a-select-option>
              <a-select-option value="3">已审</a-select-option>
              <a-select-option value="9">回退</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col flex="110px">
          <a-form-item label="方式	" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 17 }">
            <a-select v-model:value="queryParam.sffs" class="w80" placeholder="全部" :showArrow="false" :allowClear="true">
              <a-select-option value="1">转账</a-select-option>
              <a-select-option value="3">挂账</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col flex="150px">
          <a-form-item label="账户" :label-col="{ style: { width: '40px' } }" >
            <JDictSelectTag
              placeholder=""
              v-model:value="queryParam.bankIds"
              dictCode="chee_bank,djm,id@ddlxBank"
              mode="multiple"
              :getPopupContainer="(node) => node.parentNode"
              :dropdownStyle="{ width: '190px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
              :showArrow="false"
              :maxTagTextLength="20"
              :maxTagCount="0"
            />
          </a-form-item>
        </a-col>

        <a-col flex="180px">
          <a-form-item label="订单号" :label-col="{ style: { width: '60px' } }" :wrapper-col="{ span: 17 }">
            <a-input placeholder="" v-model:value="queryParam.orderId"></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:180px;">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
            <a-button type="default" @click="searchReset" preIcon="ant-design:reload-outlined" style="margin-left: 8px">重置</a-button>
          </span>
        </a-col>

      </a-row>
    </a-form>
  </div>

  <!-- table区域-begin -->
  <BasicTable @register="registerTable" :onRowDbClick="handleDblclick" :onRowClick="handleClick" :rowClassName="rowClassName">
    <template #operation="{text, record}">
      <a-badge :color="statusColor(text, record)" :text="operateTim(text, record)" />
    </template>
  </BasicTable>
  <!-- table区域-end -->

  <!-- 表单区域 <TestModules @register="registerAccountFlowInterval" @success="reload"></TestModules> -->
  <AccountFlowInterval @register="registerAccountFlowInterval" @success="reload"></AccountFlowInterval>
</template>

<script lang="ts" setup name="accountFlow-takeFinaneChecked">
import {ref, computed, unref, reactive, toRaw} from 'vue';
import {BasicTable, TableAction, ActionItem, BasicColumn} from '/@/components/Table'
import {useModal} from '/@/components/Modal';
import {useListPage} from '/@/hooks/system/useListPage'
import {render} from "/@/utils/common/renderUtils";
import {takeFinaneChecked} from "/@/views/full/account/types/accountflow.api";

import moment from 'dayjs'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import AccountFlowInterval from './modules/AccountFlowInterval.vue';

//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive({
  ddlxIds: '',
  stat: '1', //未审
  orderId: '',
  sffs: '',
  bankIds: [],
  beginDate: moment().subtract( 30, 'day').format('YYYY-MM-DD'),
  endDate: moment().format('YYYY-MM-DD'),
  type: 'takeFinaneChecked'
})

/* 日期参数 */
function disabledStartDate(beginDate) {
  const endDate = queryParam.endDate
  if (!beginDate || !endDate) {
    return false
  }
  // true 禁用 false 可用
  beginDate = moment(beginDate).format('YYYY-MM-DD')
  return moment(beginDate).valueOf() > moment(endDate).valueOf();
}

function disabledEndDate(endDate) {
  const beginDate = queryParam.beginDate
  if (!endDate || !beginDate) {
    return false
  }
  // true 禁用 false 可用
  endDate = moment(endDate).format('YYYY-MM-DD')
  return moment(beginDate).valueOf() > moment(endDate).valueOf();
}

//订单列表
const statusFmt = ({text}: { text: any }) => {
  if (!text) {
    return
  }
  const color = text == '1' ? 'green' : text == '3' ? 'red' : 'default';
  return render.renderTag(render.renderDict(text, 'accountStat'), color)
}

//操作人 1审核，经理，9回退
const statusColor = (text, record) => {
  let color = '';
  if (record.stat == '1') {
    color = 'green'
  } else if(record.stat == '3') {
    color = 'magenta'
    text = record.spsj
  } else if(record.stat == '9') {
    color = '#999'
    text = record.spsj
  }

  if (!text) {
    color = "";
  }
  return color
}

//操作时间
const operateTim = (text, record) => {
  if (record.stat == "3") {
    text = record.spsj
  } else if (record.stat == "9") {
    text = record.spsj
  }
  if (!text) {
    return "";
  } else {
    return moment(text).format("YYYY-MM-DD HH:mm");
  }
}

const sffsFmt = ({text}: { text: any }) => {
  if (!text) {
    return
  }
  let color : String[] = ['', 'red', '', 'blue', 'purple', 'orange'];
  return render.renderTag(render.renderDict(text, 'sffsType'), color[text])
}

const operator = ({ text, record }) => {
  if (record.stat == "2") {
    text = record.shrName
  } else if (record.stat == "3" || record.stat == "9") {
    text = record.sprName || record.shrName
  }
  if (!text) {
    return "";
  } else {
    return text;
  }
};

//订单列表 - 表头
const columns: BasicColumn[] = [
  { title: '状态', align: 'center', dataIndex: 'stat', width: 45, customRender: statusFmt,},
  {
    title: "订单号",
    align: "center",
    dataIndex: "orderId",
    width: 85,
    className: 'text-red-500'
  },
  {
    title: "部门",
    align: "center",
    dataIndex: "ddlx",
    width: 65,
    ellipsis: true,
    customRender: ({ text }) => render.renderDict(text, "ddlxType")
  },
  {
    title: "银行",
    align: "left",
    dataIndex: "djm",
    width: 130,
    ellipsis: true,
    customRender: ({ text, record }:{ text: any; record: any }) => record.sl > 0  || record.fj > 0 ? render.renderColor(text, "text-green-500") : text
  },
  { title: '方式', align: 'center', dataIndex: 'sffs', width: 45, customRender: sffsFmt},
  { title: '收款金额', align: 'right', dataIndex: 'skje', width: 80, className: 'text-red-500' },
  { title: '收款时间', align: 'center', dataIndex: 'sksj', width: 75, },
  { title: '备注', align: 'left', dataIndex: 'bz', width: 250, ellipsis: true, },
  { title: '操作人', align: 'center', dataIndex: 'name', width: 60, ellipsis: true, customRender: operator},
  { title: '操作时间', align: 'center', dataIndex: 'lrsj', width: 110, slots: { customRender: 'operation' } },
]

function searchQuery() {
  setProps({searchInfo:toRaw(queryParam)});
  reload()
}

function searchReset() {
  Object.assign(queryParam, {ddlxIds: '', ddzt: '', ywlx: ''});
  reload();
}

function handleSummary(tableData: Recordable[]) {
  const res = getRawDataSource()
  if (res) {
    return getRawDataSource().summary;
  } else {
    return [];
  }
}

// 列表页面公共参数、方法
const {prefixCls, tableContext} = useListPage({
  designScope: 'accountFlow-takeFinaneChecked',
  tableProps: {
    api: takeFinaneChecked,
    columns: columns,
    showTableSetting: false,
    showIndexColumn: true,    //行号
    clickToRowSelect: true,   //点击选择
    showActionColumn: false,
    useSearchForm: false,
    resizeHeightOffset: 40,
    showSummary: true,
    summaryFunc: handleSummary,
    beforeFetch: (params) => Object.assign(params, unref(queryParam)),
  },
})

//注册table数据
const [registerTable, {reload, setProps, getRawDataSource}] = tableContext

//详细订单
const [registerAccountFlowInterval, {openModal: openAccountFlowInterval}] = useModal();

//单击行
let selectRows = reactive<any>({id: '', username: ''});
function handleClick(record) {
  selectRows.id = record.id
  selectRows.username = record.username
}

function rowClassName(record, index) {
  return record.id === selectRows.id ? 'row-selected' : '';
}

//双击行
function handleDblclick(record) {
  var params = Object.assign({}, queryParam)
  params['id'] = record.id
  params['type'] = 'takeFinaneChecked'
  openAccountFlowInterval(true, params);
}

</script>
<style scoped>

</style>
